<template>
  <view>
    <!--        微信登录-->
    <up-popup
      :safeAreaInsetBottom="false"
      :show="show"
      mode="center"
      @close="close"
      @open="open"
    >
      <view class="login_wrap">
        <view class="login_title">提示</view>
        <view class="content_des mgb-30">当前未登录，请授权手机号登录</view>
        <view class="df login_btn_wrap">
          <view class="can_btn" @click="close"> 取消</view>
          <button
            class="submit_btn"
            open-type="getPhoneNumber"
            @getphonenumber="getPhoneNumber"
          >
            授权手机号登录
          </button>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  value: {
    type: Boolean,
    default: false
  }
})
const show = ref(false)
const emit = defineEmits(['update:value', 'open', 'close'])

watch(
  () => props.value,
  (newVal) => {
    show.value = newVal
  },
  { deep: true, immediate: true }
)

const getPhoneNumber = (e) => {}
const close = () => {
  emit('update:value', false)
  emit('close')
}
</script>

<style lang="scss" scoped>
.login_wrap {
  width: 510rpx;

  .login_title {
    @include fontNSC(32rpx, 500, #000000);
    text-align: center;
    line-height: 100rpx;
    height: 100rpx;
  }

  .content_des {
    box-sizing: border-box;
    width: 100%;
    padding: 24rpx;
    @include fontNSC(28rpx, 400, #333333);
    text-align: center;
  }

  .login_btn_wrap {
    .can_btn {
      width: 255rpx;
      height: 77rpx;
      border-top: 1rpx solid #e5e5e5;
      @include fontNSC(24rpx, 500, #333);
      text-align: center;
      line-height: 77rpx;
    }

    .submit_btn {
      width: 255rpx;
      height: 77rpx;
      font-size: 24rpx;
      background-color: #ff5a5f;
      color: #ffffff;
      text-align: center;
      line-height: 77rpx;
      border: none;
      border-radius: 0;
    }
  }
}
</style>
